<template>
  <view class="mine-setting" v-cloak>
    <view class="setting-card" v-if="type === 'person'">
      <h2>个人资料</h2>
      <view class="card-list">
        <view class="list-item" @click="handleChange('nickName')">
          <h3>昵称</h3>
          <p>{{info.nickName}}</p>
          <uni-icons color="#979899" size="20" type="forward"></uni-icons>
        </view>
        <picker mode="selector" :range="sexList" @change="handleChangeSex($event,'genderName')">
          <view class="list-item">
            <h3>性别</h3>
            <p>{{info.genderName || '保密'}}</p>
            <uni-icons color="#979899" size="20" type="forward"></uni-icons>
          </view>
        </picker>
        <picker mode="date" @change="handleChangeSex($event,'birthday')" :end="endDate">
          <view class="list-item">
            <h3>生日</h3>
            <p>{{info.birthday || '保密'}}</p>
            <uni-icons color="#979899" size="20" type="forward"></uni-icons>
          </view>
        </picker>
      </view>
    </view>
    <view class="setting-card" v-if="type === 'safe'">
      <h2>账号安全</h2>
      <view class="card-list">
        <view class="list-item">
          <h3>手机号</h3>
          <p>{{info.mobile}}</p>
          <uni-icons color="#979899" size="20" type="forward"></uni-icons>
        </view>
        <view class="list-item" @click="handleChange('password')">
          <h3>修改账号密码</h3>
          <uni-icons color="#979899" size="20" type="forward"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {format} from '@/utils/Tools.js'
  export default {
    data() {
      return {
        type:'',
        info:{},
        sexList:['男','女'],
        endDate:''
      };
    },
    onLoad(options) {
      this.type = options.type
      this.endDate = format(Date.now())
    },
    onShow() {
      this.info = uni.getStorageSync('user')
    },
    methods:{
      async handleChangeSex(e,type){
        let data = {}
        if(type == 'genderName'){
          data = {
            genderName:this.sexList[e.detail.value]
          }
        }
        if(type == 'birthday'){
          data = {
            birthday:e.detail.value
          }
        }
        const res = await this.$put('/mb/users',data,1)
        if(res.code == '1'){
          uni.showToast({
            title:'修改成功',
            icon:'success'
          })
          uni.setStorageSync('user',{
            ...uni.getStorageSync('user'),
            ...data
          })
          this.info = {...this.info,...data}
        }else{
          uni.showToast({
            title:res.message,
            icon:'none'
          })
        }
      },
      handleChange(e){ ///  点击修改资料
        uni.navigateTo({
          url:`/minePackage/mine-change?type=${e}`
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.mine-setting{
  min-height: 100vh;
  padding: 48rpx;
  box-sizing: border-box;
  h2{
    font-size: 36rpx;
    font-weight: 500;
    color: #90989F;
  }
  .card-list{
    .list-item{
      background: #fff;
      padding: 24rpx;
      display: flex;
      align-items: center;
      margin-top: 48rpx;
      border-radius: 24rpx;
      h3{
        font-size: 28rpx;
        color: #313233;
        margin-right: auto;
      }
      p{color: #90989F;margin-right: 12rpx;}
    }
  } ///  mine-list end
}
</style>
